<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jquery</title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
		$(document).ready(function(){
			$('input[type="text"]').focus(function(){
				min_length = $(this).attr('minlength');
				if(min_length > 0 && $(this).val().length < min_length){
					$(this).after(' <span>'+min_length+'characters required</span>');
				}
			}).keyup(function(){
				if($(this).val().length > min_length){
					$(this).next().remove();
				}
			}).blur(function(){
				$(this).next().remove();
			});
		});
	</script>
</head>
<body>
    <p>
    	5: <input type="text" minlength="5" />
    </p>
     <p>
    	10: <input type="text" minlength="10" />
    </p>
</body>   
</html>
